<template>
	<go-back :title="'确认支付'"></go-back>
	<view class="pay">
		<!-- 支付页面{{id}} -->
		<view class="order-page">
			<!-- 顶部信息 -->

			<!-- 地址信息 -->
			<view class="address">
				<view class="address-text">
					<view class="left">
						<uni-icons type="location-filled" color="#ff7066" size="25"></uni-icons>
						<view>
							<text>城整大道东路999号 (粤嵌科技)</text>
							<text class="text"><span>周</span> 19874060068</text>
						</view>
					</view>
					<view><uni-icons type="right" color="#888" size="20"></uni-icons></view>
				</view>
			</view>

			<!-- 商品信息 -->
			<view class="store">
				<text class="store-name">美乎旗舰店</text>
				<view class="product">
					<image :src="productPay.sift_img" mode="aspectFit" class="product-image"></image>
					<view class="product-info">
						<text class="product-title">{{productPay.sift_text}}</text>
						<text class="product-variant">颜色分类：经典杏色</text>
						<text class="product-price">券后价 ¥ 49.9</text>
						<text style="color: #888; margin-left: 20rpx; font-size: 28rpx;">¥
							{{productPay.sift_Sprict}}</text>
						<view class="undertake-box">
							<text class="undertake">假一赔四</text>
							<text class="undertake">极速退款</text>
							<text class="undertake">7天无理由退换</text>
						</view>
					</view>
				</view>

				<view class="quantity-control">
					<view class="add">
						<uni-number-box width="15" style="margin-left: 20rpx;" min="1" background="#ff7066" color="#fff"
							@change="changeValue" />
					</view>
				</view>
			</view>

			<!-- 其他信息 -->
			<view class="extra-info">
				<view class="extra-item" style="align-items: center;">
					<text>配送服务</text>
					<view style="display: flex; align-items: center; font-size: 25rpx;">
						<view>
							<text>快递 包邮 送运险</text>
							<p style="text-align: right;">预计明天发货</p>
						</view>
						<uni-icons type="right" color="#888" size="15"></uni-icons>
					</view>
				</view>

				<view class="extra-item">
					<text>开发票</text>
					<view style="display: flex; align-items: center; color: #888;">
						<text style=" font-size: 25rpx;">本次不开具发票</text>
						<uni-icons type="right" color="#888" size="15"></uni-icons>
					</view>
				</view>
				<view class="extra-item">
					<text>订单备注</text>
					<view>
						<text style="color: #888; font-size: 25rpx;">无备注</text>
						<uni-icons type="right" color="#888" size="15"></uni-icons>
					</view>
				</view>
			</view>

			<!-- 价格详情 -->
			<view class="price-details">
				<text>商品 {{total}}个</text>
				<text>合计: ¥{{total*49.9}}</text>
			</view>
			<!-- 底部结算 -->
			<view class="footer">
				<view class="checkout">
					<!-- <text>合计: ¥{{total*49.9}}</text> -->
					<button class="checkout-button">立即支付¥{{total*49.9}}</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import GoBack from '../../components/GoBack/GoBack.vue';
	export default {
		components: {
			GoBack
		},
		data() {
			return {
				// 详情支付id
				id: "",
				// 介绍传递过来的数组
				productPay: [],
				//合计
				total: 1,
			}
		},
		onLoad(option) {
			let id = option.pay_id;
			const data = option.productData;
			// console.log("1111",data);
			// console.log(option.productData);
			if (id) {
				this.id = id;
			};
			if (data) {
				// 解析传递的产品数据
				this.productPay = JSON.parse(decodeURIComponent(data));
				// console.log(this.productPay);
			};
		},
		methods: {
			changeValue(value) {
				// console.log('返回数值：', value);
				this.total = value;
			},
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../uni.scss';

	.pay {
		padding: $pad;
		overflow: hidden;
		height: 100vh;
		background-color: #ebebeb;

		.order-page {
			margin-top: 140rpx;
			font-family: Arial, sans-serif;
		}

		.header {
			background-color: #f8f8f8;
			text-align: center;
			color: #888;
		}

		.address,
		.store,
		.extra-info,
		.price-details {
			margin-bottom: 15px;
			background-color: #fff;
			padding: 10px;
			border-radius: 5px;
		}

		.address-text {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #333;
			font-size: 25rpx;

			.left {
				display: flex;
				align-items: center;

				.text {
					margin: 10rpx 0;
					display: block;
					color: #888;
				}
			}

		}

		.store-name {
			font-size: 16px;
			font-weight: bold;
			margin-bottom: 20px;
		}

		.product {
			display: flex;
			align-items: self-start;
			margin: 5px 0;
		}

		.product-image {
			width: 80px;
			height: 90px;
			margin-right: 10px;
			border-radius: 20rpx;
		}

		.product-info {
			flex: 1;

			.product-title {
				font-size: 28rpx;
				overflow: hidden;
				/* 超出隐藏 */
				display: -webkit-box;
				/* 设置为 flexbox */
				-webkit-box-orient: vertical;
				/* 垂直显示 */
				-webkit-line-clamp: 2;
				/* 显示的行数 */
				text-overflow: ellipsis;
				/* 超出部分显示省略号 */
			}

			.product-variant {
				color: #888;
				font-size: 25rpx
			}

			.undertake-box {
				margin-top: 5rpx;

				.undertake {
					border: 2rpx solid #ffa286;
					padding: 5rpx 8rpx;
					margin-right: 15rpx;
					color: $color;
					font-size: 20rpx;
					border-radius: 5rpx;
					font-weight: 700;
				}
			}
		}

		.product-title,
		.product-variant {
			color: #444;
			display: block;
			padding: 4rpx 0;
		}

		.product-price {
			color: #e60000;
			font-size: 28rpx;
		}

		.quantity-control {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			gap: 10px;
			margin-top: 20rpx;

			.add {
				width: 180rpx;
				background-color: $bagroundColor;
				border-top-left-radius: 50rpx;
				border-top-right-radius: 50rpx;
				border-bottom-left-radius: 50rpx;
				border-bottom-right-radius: 50rpx;
			}
		}

		.extra-item {
			display: flex;
			justify-content: space-between;
			margin: 5px 0 16rpx 0;
			color: #555;

		}

		.price-details {
			display: flex;
			justify-content: space-between;
			font-size: 14px;
			color: #333;
		}

		.footer {
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 100;
			// background-color: red;
			.checkout {
				padding: 0 100rpx;
				// display: flex;
				// align-items: center;
				// background-color: #fff;
				padding: 10px;
				border-radius: 5px;
				// background-color: #ff8c00;

				.checkout-button {
					width: 90%;
					height: 90rpx;
					background: $bgRight;
					color: #fff;
					box-sizing: border-box;
					padding: 0 70rpx;
					border: none;
					border-top-left-radius: 50rpx;
					border-top-right-radius: 50rpx;
					border-bottom-left-radius: 50rpx;
					border-bottom-right-radius: 50rpx;
				}
			}
		}
	}
</style>